<template>
    <section>
        <Header />
        <Footer />
        <div class="srearch-page">
            <div class="w_2 left">
                <div class="sreach_page_icon">
                    <div class="icon_box w_10_third">
                        <div class="icon_box_img">
                            <img src="@/assets/img/sreach/ys.png" alt="icon png" class="" />
                        
                        </div>

                        <p>手术医生</p>
                    </div>
                    <div class="icon_box w_10_third">
                        <div class="icon_box_img">
                            <img src="@/assets/img/sreach/mz.png" alt="icon png" class="" />
                        </div>

                        <p>麻醉医生</p>
                    </div>
                    <div class="icon_box w_10_third">
                        <div class="icon_box_img">
                            <img src="@/assets/img/sreach/hs.png" alt="icon png" class="" />
                        </div>

                        <p>护士</p>
                    </div>
                    <div class="icon_box w_10_third">
                        <div class="icon_box_img">
                            <img src="@/assets/img/sreach/ssjc.png" alt="icon png" class="" />
                        </div>

                        <p>手术进程</p>
                    </div>
                    <div class="icon_box w_10_third">
                        <div class="icon_box_img">
                            <img src="@/assets/img/sreach/spjk.png" alt="icon png" class="" />
                        </div>

                        <p>视屏监控</p>
                    </div>
                    <div class="icon_box w_10_third">
                        <div class="icon_box_img">
                            <img src="@/assets/img/sreach/hjsb.png" alt="icon png" class="" />
                        </div>

                        <p>环境设备</p>
                    </div>
                    <div class="icon_box w_10_third">
                        <div class="icon_box_img">
                            <img src="@/assets/img/sreach/hzcx.png" alt="icon png" class="" />
                        </div>

                        <p>患者查询</p>
                    </div>
                    <div class="icon_box w_10_third">
                        <div class="icon_box_img">
                            <img src="@/assets/img/sreach/zbcx.png" alt="icon png" class="" />
                        </div>

                        <p>值班查询</p>
                    </div>
                    <div class="icon_box w_10_third">
                        <div class="icon_box_img">
                            <img src="@/assets/img/sreach/pbzh.png" alt="icon png" class="" />
                        </div>

                        <p>排班汇总</p>
                    </div>
                     <div class="icon_box w_10_third">
                        <div class="icon_box_img">
                            <img src="@/assets/img/sreach/ssj.png" alt="icon png" class="" />
                        </div>

                        <p>手术间查询</p>
                    </div>
                    <div class="icon_box w_10_third">
                        <div class="icon_box_img">
                            <img src="@/assets/img/sreach/zygl.png" alt="icon png" class="" />
                        </div>

                        <p>资源管理</p>
                    </div>
                </div>
            </div>
            <div class="w_6 left ops_list_c">
                <div class="ops_list">
                    <div class="ops_lsit_box" v-for="item in 50">
                        <div class="ops_lsit_name">
                            何妙春<img src="@/assets/img/sreach/ssz.png" alt="icon png" class="" />
                        </div>
                        <div class="ops_lsit_footer">
                            <span>
                                申请:7台
                            </span>
                            <span>
                                完成:5台
                            </span>
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="w_2 left">
                <div class="sreach_btn_c">
                    <button class="btn btn_defalut w_10">
                        院区
                    </button>
                    <button class="btn btn_white w_10">
                        特需医疗门诊
                    </button>
                    <button class="btn btn_white w_10">
                        眼底综合病区
                    </button>
                    <button class="btn btn_white w_10">
                        特需医疗门诊
                    </button>
                    <button class="btn btn_white w_10">
                        青光眼区
                    </button>
                    <button class="btn btn_white w_10">
                        眼整形病区
                    </button>
                    <button class="btn btn_white w_10">
                        眼外伤病区
                    </button>
                    <button class="btn btn_white w_10">
                        白内障一区
                    </button>
                    <button class="btn btn_white w_10">
                        白内障二区
                    </button>
                    <button class="btn btn_white w_10">
                        综合二区
                    </button>
                </div>
               

            </div>
        </div>
    </section>
</template>

<script lang="ts">
    import {
        Component,
        Vue
    } from 'vue-property-decorator';
    import Header from '@/components/header/sub_header.vue';
    import Nav from '@/components/nav/room_nav.vue';
    import Footer from '@/components/footer/Footer.vue';


    @Component({

        components: {
            Header,
            Nav,
            Footer
        },

    })

    export default class Sreach extends Vue {
        roomData = [{
                state: 'wait'
            },
            {
                state: 'danger'
            },
            {
                state: 'warning'
            },
            {
                state: 'wait'
            },
        ]
    }
</script>

<style lang="scss" scpoed>
    .srearch-page {
        border-top: 5px solid $themecolor;
        overflow: hidden;
        padding: 10px;
        .sreach_page_icon {
            background: $themecolor;
            color: $color;
            padding: 0.1rem;
            text-align: left;
            .icon_box {
                display:inline-block;
                padding: 2px;
                .icon_box_img {
                    background:$color;
                    border-radius: 5px;
                    margin-bottom: 5px;
                    max-width: 70px;
                    margin: auto;
                    img {
                        width: 100%;
                    }
                }

                p {
                    color: $color;
                    margin:5px 0;
                    text-align: center;
                }
            }
        }
        .ops_list_c{
            padding:0 10px;
            .ops_list{
                padding:10px 30px;
                border: 1px solid $grey_p;
                overflow: hidden;
                .ops_lsit_box{
                    float: left;
                    width: 18%;
                    margin: 1%;
                    border: 1px solid $grey_p;
                    .ops_lsit_name{
                        font-size: 0.2rem;
                        text-align: center;
                        padding: 10px;
                        img{
                            width: 20px;
                        }
                    }
                    .ops_lsit_footer{
                        background:$themecolor;
                        color:$color;
                        span{
                            width:50%;
                            border-right:1px solid $color;
                            &:last-child{
                                border-right:0px solid $color;
                            }
                        }
                    }
                    
                }
                .ops_lsit_box{
                    float:left;
                    width:18%;
                }
            }
        }
        .sreach_btn_c{
            padding:10px;
             border: 1px solid $grey_p;
            button{
                font-size: 0.2rem;
                font-weight: normal;
                padding: 10px;
                margin-bottom:10px;
            }
        }
       
        .l_content {
            width: 100%;
            text-align: left;
            overflow: hidden;
            float: left;
            @include bolder;

            .l_content_1 {
                padding: 0.2rem;
                overflow: hidden;

                .right {
                    img {
                        width: 30px;
                        margin-right: 20px;
                    }

                    .btn {
                        margin-right: 30px;

                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }

            }

            .l_content_2 {

                margin-top: 0.2rem;

                .table {
                    th {
                        &:first-child {
                            border-left: 0;
                        }
                    }

                    tr {
                        padding: 5px;
                        border: 0;

                        td {
                            padding: 5px;

                            img {
                                width: 20px;
                            }

                            &:first-child {
                                border-left: 0;
                            }

                            &:last-child {
                                border-right: 0;
                            }

                        }

                        &.active {
                            background: $themecolor;
                            color: $color;
                        }

                        &:last-child {
                            td {
                                border-bottom: 0;
                            }

                        }
                    }

                }
            }
        }

    }
</style>